<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Grid: Minmax and FR Units</title>
        <link rel="author" title="Azul Layout" href="https://azul.rs/" />
        <meta name="flags" content="" />
        <meta name="assert" content="Grid should handle minmax() function and fr units correctly for responsive layouts." />
        <style type="text/css">
            * { margin: 0; padding: 0; }
            body {
                width: 800px;
                height: 600px;
                padding: 20px;
                background: #2b5876;
            }
            .container {
                display: grid;
                width: 100%;
                height: 560px;
                grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr) minmax(100px, 1fr);
                grid-template-rows: minmax(100px, 1fr) minmax(150px, 2fr) minmax(80px, 1fr);/* gap: 15px; */ margin-right: 15px; margin-bottom: 15px;
            }
            .item {
                background: #ee0979;
                border: 3px solid rgba(255, 255, 255, 0.2);
            }
            .item:nth-child(1) { background: #667eea; }
            .item:nth-child(2) { background: #f093fb; }
            .item:nth-child(3) { background: #4facfe; }
            .item:nth-child(4) { background: #43e97b; }
            .item:nth-child(5) { background: #fa709a; }
            .item:nth-child(6) { background: #30cfd0; }
            .item:nth-child(7) { background: #a8edea; }
            .item:nth-child(8) { background: #ff9a9e; }
            .item:nth-child(9) { background: #ffecd2; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </body>
</html>
